import React, { PureComponent } from 'react';
import { Divider, Typography, Popover, InputNumber, Tooltip } from 'antd';
import { withRemove } from './index';

const { Text } = Typography;

@withRemove
class DividionComponent extends PureComponent {
  state = {
    content: this.props.data.content,
  };

  handleChange = value => {
    const { data } = { ...this.props };
    data.content = value;
    this.props.onChange(data);
    this.setState({ content: value });
  };

  render() {
    const { content } = this.state;
    return (
      <Popover
        placement="right"
        trigger="click"
        content={
          <Tooltip trigger={['focus']} title={`高度：${content}`} placement="topLeft">
            <InputNumber min={0} precision={2} value={content} onChange={this.handleChange} />
          </Tooltip>
        }
      >
        <Divider style={{ margin: 0, lineHeight: `${content}px` }}>
          <Text type="secondary" style={{ fontSize: 12 }}>
            辅助分割空白占位（{content}px）
          </Text>
        </Divider>
      </Popover>
    );
  }
}

export default DividionComponent;
